import { scene } from './utils/init'
import * as THREE from 'three'

function initBase() {
  const geometry = new THREE.SphereGeometry(1, 32, 16)

  const textureLoader = new THREE.TextureLoader()
  const texture = textureLoader.load('texture/one/basecolor.jpg')
  texture.colorSpace = THREE.SRGBColorSpace
  const transTextureLoader = new THREE.TextureLoader()
  const transTexture = transTextureLoader.load('texture/one/opacity.jpg')

  const aoTextureLoader = new THREE.TextureLoader()
  const aoTexture = aoTextureLoader.load('texture/one/ambientOcclusion.jpg')

  const roughnessTexture = textureLoader.load('texture/one/roughness.jpg')
  roughnessTexture.colorSpace = THREE.SRGBColorSpace

  const metaTexture = textureLoader.load('texture/one/metalness.jpg')
  metaTexture.colorSpace = THREE.SRGBColorSpace

  const displaymentMap = textureLoader.load('texture/one/displace_height.jpg')
  displaymentMap.colorSpace = THREE.SRGBColorSpace

  // 法线贴图
  const normalMap = textureLoader.load('texture/one/normal.jpg')
  normalMap.colorSpace = THREE.SRGBColorSpace

  const material = new THREE.MeshStandardMaterial({ 
    map: texture,
    roughness: 1,
    roughnessMap: roughnessTexture,
    metalness: 1, 
    metalnessMap: metaTexture,
    displacementMap: displaymentMap,
    displacementScale: 1,
    normalMap: normalMap, // 法线贴图 使得物体反光的更加真实(影响光照) 
    // rgb值会影响每个像素片段的曲面法线 并更改颜色照亮的方式
    // normalScale: (1, 1)
  })

  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
}

function createLight () {
    const light = new THREE.AmbientLight(0xffffff)
    scene.add(light)
    const direction = new THREE.DirectionalLight(0xffffff, 2)
    direction.position.set(2, 3, 2)
    scene.add(direction)
    const helper = new THREE.DirectionalLightHelper(direction, .5)
    scene.add(helper)
}

initBase()
createLight()